আমরা সবাই জানি ইন্টারনেট ব্যবহার করে ইমেইল, ফাইল শেয়ারিং, ভয়েস কলিং এরকম বিভিন্ন তথ্য ও সেৰা আদান-প্রদান করা যায়। এদের মধ্যে তথ্য আদান-প্রদানের জন্য বহুল ব্যবহৃত একটি মডেল হচ্ছে ওয়েৰ। ওয়েব হচ্ছে ওয়ার্ল্ড ওয়াইড ওয়েব-এর সংক্ষিপ্ত রূপ। ওয়েবের মাধ্যমে ইন্টারনেট ব্যবহার করে ছুটি যন্ত্রের মধ্যে তথ্য আদান-প্রদান করা যায়। বর্তমানে ওয়েবকে আমরা বলতে পারি তথ্যভান্ডার যেখানে অনেক তথ্য রিসোর্স, ওয়েব ডকুমেন্ট আকারে সঞ্চিত আছে। জামরা আমাদের দৈনন্দিন জীবনে ওয়েবের নানা ধরনের তথ্যের উপর পুরোপুরি নির্ভরশীল হয়ে গেছি। এই অধ্যায়ে কীভাবে একটি কার্যকর ওয়েব সাইট তৈরি করা যায় সেটি শিক্ষার্থীদের সামনে তুলে ধরা হবে।

এ অধ্যায় পাঠ শেষে শিক্ষার্থীরা-

• ওয়েব ডিজাইনের ধারণা ব্যাখ্যা করতে পারবে;
• ওয়েবসাইটের কাঠামো বর্ণনা করতে পারবে;
• এইচটিএমএল-এর ধারণা ব্যাখ্যা করতে পারবে।
• এইচটিএমএল ব্যবহার করে ওয়েব পেইজ ডিজাইন করতে পারবে;
• ওয়েব সাইট পাবলিশ করতে পারবে।

কম্পিউটারের ইতিহাসের প্রথম যুগে বড় বড় বিশ্ববিদ্যালয়, গবেষণাগার ও সরকারি গুরুত্বপূর্ণ প্রতিষ্ঠান যেমন প্রতিরক্ষা বা সেনাবাহিনীদের কাছেই শুধু কম্পিউটার ছিল। এই কম্পিউটারগুলো প্রচুর পরিমাণে হিসাব নিকাশ করা, গবেষণালব্ধ তথ্য যাচাই-বাছাই, সংগ্রহ ও সংরক্ষণ করার কাজেই তখন ব্যবহৃত হতো। অচিরেই এক কম্পিউটারকে অন্য কম্পিউটারের সঙ্গে সংযুক্ত করার প্রয়োজনীয়তা উপলব্ধ হয় এবং ধাপে ধাপে ইন্টারনেট ব্যবস্থা তৈরি হয়। সেইসঙ্গে বিভিন্ন ধরনের ডকুমেন্ট বা ফাইল এক কম্পিউটার থেকে অন্য কম্পিউটারে স্থানান্তরের চাহিদা তৈরি হয়। এই চাহিদা থেকেই টিম বার্নার্স-লি (Tim Berners-Lee) ওয়ার্ল্ড ওয়াইড ওয়েব (www : world wide web) বা সংক্ষেপে ওয়েব তৈরি করেন। তিনি তখন সুইজারল্যান্ডের CERN নামক একটি গবেষণাগারে কর্মরত ছিলেন। ১৯৮৯ সালে তিনি এমন একটি ওয়েবের ধারণা প্রস্তাব করেন যার মাধ্যমে আইপি অ্যাড্রেস (IP Address) 1 ব্যবহার করে এক কম্পিউটার থেকে অন্য কম্পিউটারে বিভিন্ন ডকুমেন্ট পাঠানো যাবে। টিমের ধারণা ছিল ওয়েবের মাধ্যমে বিভিন্ন দেশের বিজ্ঞানীরা যেন তাদের নিজস্ব দেশে বসেই CERN এর কম্পিউটার থেকে বিভিন্ন তথ্য সংগ্রহ করতে পারেন। তিনি প্রস্তাব করেন, একবারে শত শত পৃষ্ঠার ডকুমেন্ট ফাইল ডাউনলোড করার ব্যবস্থা না করে সব পৃষ্ঠা আলাদা আলাদাভাবেই যেন ইন্টারনেট থেকে সংগ্রহ করার ব্যবস্থা করা যায়। তাতে করে একেকটি পৃষ্ঠায় অন্যান্য দরকারি পৃষ্ঠার লিঙ্ক দিয়ে দেওয়া যাবে। যার যার যেসব পৃষ্ঠা দরকার হবে তারা শুধু সেই সমস্ত পৃষ্ঠাই ডাউনলোড করবে। তিনি ইন্টারনেট ব্যবহার করে পাঠানো লিখিত তথ্যের নাম দেন হাইপারটেক্সট (Hypertext)। এই হাইপারটেক্সটগুলো খুঁজে পাওয়া যাবে বিভিন্ন নেটওয়ার্ক ঠিকানায় যার নাম হবে হাইপারলিঙ্ক (Hyperlink)। লিখিত তথ্যের বাইরে ছবি, অডিও ও ভিডিও জাতীয় তথ্যকে বলা হবে হাইপারমিডিয়া (Hypermedia)। টিম চিন্তা করেন, এমন একটি উপায় করতে হবে যেন লিঙ্কগুলো মাউস দিয়ে ক্লিক করেই ব্যবহারকারীরা সেই হাইপারলিঙ্ক থেকে হাইপারটেক্সট পেতে পারেন। 1990 সালে তিনি তার সহকর্মীদের সহায়তায় তার ধারণাটিকে আরো সুগঠিত রূপ দিয়ে পুনরায় প্রস্তাব করেন। ওয়েবের এই তথ্যগুলো অন্য কম্পিউটারে দেখার জন্য তিনি একটি সফটওয়্যারও তৈরি করেন যা হচ্ছে একটি ওয়েব ব্রাউজার।

এই মূল ধারণার ওপরেই তৈরি হয়েছে আজকের ওয়েব। বর্তমানে ইন্টারনেটে অসংখ্য ওয়েবসাইট রয়েছে। এই ওয়েবসাইটগুলো নিজের কম্পিউটার থেকে দেখা বা ব্রাউজ করার জন্য আমরা সাধারণত বিভিন্ন সফটওয়্যার ব্যবহার করি। এই সফটওয়্যারগুলোকে বলা হয় ওয়েব ব্রাউজার। বিভিন্ন প্রতিষ্ঠানের তৈরি বিভিন্ন ওয়েব ব্রাউজার রয়েছে। যেমন— মজিলা ফায়ারফক্স, গুগল ক্রোম, সাফারি, ওপেরা, মাইক্রোসফট এজ ইত্যাদি।

1 আইপি অ্যাড্রেস (IP Address) : ইন্টারনেটে সংযুক্ত প্রতিটি যন্ত্র (যেমন- কম্পিউটার, মোবাইল ফোন ইত্যাদি)কে স্বতন্ত্রভাবে চিহ্নিত করার জন্য একটি বিশেষ নম্বর ব্যবহার করা হয় যাকে আইপি অ্যাড্রেস বলে। আইপি অ্যাড্রেস হচ্ছে ইন্টারনেটে একটি নির্দিষ্ট যন্ত্রের ঠিকানা।

একসময় ওয়েবসাইটগুলো ছিল স্ট্যাটিক (static), অর্থাৎ সেখানে বিভিন্ন তথ্য রাখা হতো এবং ব্যবহারকারী ওয়েব ব্রাউজারের মাধ্যমে সেই তথ্য দেখতে পেতেন। কিন্তু বর্তমানে বেশিরভাগ ওয়েবসাইট আর স্ট্যাটিক ওয়েবসাইট নয়, বরং ডায়নামিক (dynamic) ওয়েবসাইট যেখানে ব্যবহারকারীরা ওয়েবসাইটে বিভিন্ন ইনপুট দেন আর সেই ইনপুট অনুসারে বিভিন্ন আউটপুট তৈরি হয়। এজন্য এগুলোকে ওয়েব অ্যাপ্লিকেশনও বলা হয়। এরকম ওয়েব অ্যাপ্লিকেশনের কিছু উদাহরণ হচ্ছে google.com, services.nidw.gov.bd, passport.gov.bd ইত্যাদি।

একটি ওয়েবসাইটের দুটি অংশ থাকে— সার্ভার ও ক্লায়েন্ট। ক্লায়েন্ট সফটওয়্যার ব্যবহারকারীর ইনপুট নিয়ে সার্ভারের কাছে ডেটা পাঠায় যাকে বলা হয় রিকোয়েস্ট (request)। সার্ভার সেই ডেটা অনুসারে ক্লায়েন্টের কাছে জৰাব বা রেসপন্স (response) পাঠায়। যেমন— একটি ওয়েবসাইটে অ্যাকাউন্ট তৈরি করতে চাইলে ব্রাউজারে বিভিন্ন তথ্য লিখে ব্যবহারকারী একটি বাটনে ক্লিক করেন, তখন সেই ডেটা সার্ভারের কাছে যায় এবং সার্ভার ডেটা পরীক্ষা-নিরীক্ষা করে যদি কোনো সমস্যা না পায় (যেমন— ইতিমধ্যে এই নামে একাউন্ট তৈরি করা আছে), তখন সার্ভার ব্যবহারকারীর একাউন্ট তৈরি করে এবং ক্লায়েন্টের কাছে রেসপন্স পাঠায়। আবার কোনো কারণে একাউন্ট তৈরি করা না গেলেও ক্লায়েন্টের কাছে রেসপন্স পাঠান |

সার্ভারে যেই সফটওয়্যার চলে, সেটি সাধারণত একটি প্রোগ্রামিং ভাষা ব্যবহার করে লেখা হয়। এসব কাজের জন্য জনপ্রিয় প্রোগ্রামিং ভাষা হচ্ছে পিএইচপি, পাইথন, জাভা, রুৰি ইত্যাদি।

ব্রাউজারে যেই ওয়েবসাইট কিংবা ওয়েব অ্যাপ্লিকেশন চলে, সেখানে ব্যবহার করা হয় HTML ও CSS HTML এর পূর্ণরুপ হচ্ছে Hyper Text Markup Language। এটি কোনো প্রোগ্রামিং ভাষা নয়, বরং একে মার্কআপ ভাষা বলা যায়। এর কাজ হচ্ছে কোনো তথ্য ব্রাউজারে প্রদর্শনের উপযোগী করা। এখানে যেসব ট্যাগ (tag) ব্যবহার করা হয়, ব্রাউজার সেগুলো বুঝতে পারে এবং সে অনুযায়ী ওয়েবসাইটে ডেটা প্রদর্শন করে।

শুধু এইচটিএমএল ব্যবহার করে ওয়েবসাইট তৈরি করা গেলেও, ওয়েবসাইটকে আরো আকর্ষণীয় ও সুন্দরভাবে উপস্থাপন করার জন্য ব্যবহার করা হয় CSS- যার পূর্ণরূপ হচ্ছে, Cascading Style Sheet আধুনিক সব ওয়েবসাইটেই HTML এর সঙ্গে CSS ব্যবহার করা হয়।

ডায়নামিক ওয়েব অ্যাপ্লিকেশনের ক্ষেত্রে সবসময়ই যে সার্ভারের কাছে ডেটা পাঠাতে হবে, এমনটি নয়। বরং অনেক কাজ ক্লায়েন্ট অংশেই করে ফেলা সম্ভব। সেজন্য ওয়েবসাইটের ক্লায়েন্ট অংশে প্রোগ্রামিং করা যায়। এই কাজের জন্য সবচেয়ে জনপ্রিয় প্রোগ্রামিং ভাষা হচ্ছে জাভাস্ক্রিপ্ট (Javascript)।

একটি ওয়েবসাইটে এক বা একাধিক ওয়েব পেইজ থাকে। সাধারণত একেবারে প্রথমে যে পৃষ্ঠা থাকে তাকে ওয়েবসাইটের হোমপেইজ (Homepage) বলা হয়। এছাড়া ওয়েবসাইটের ধরন অনুযায়ী ওয়েবসাইটে বিভিন্ন পেইজ থাকে। যেমন— অডিও-ভিডিও শেয়ারিং ওয়েবসাইটে একেকটি অডিও/ভিডিও'র জন্য একেকটি পেইজ থাকতে পারে। আবার, একেকজন ব্যবহারকারীর নিজস্ব একেকটি পেইজ থাকতে পারে। আবার ব্লগ জাতীয় ওয়েবসাইটে প্রতিটি ব্লগ পোস্টের জন্য একেকটি পেইজ থাকতে পারে। এছাড়া বিভিন্ন ওয়েবসাইটে কিছু প্রচলিত পেইজ থাকে, যেমন— contact us (যোগাযোগ), about us (আমাদের সম্পর্কে), frequently asked questions- FAQ (প্রায়শ জিজ্ঞাস্য প্রশ্ন) ইত্যাদি।

এ অধ্যায়ের ৪.২ পাঠ অংশটুকু পুরোপুরি ব্যাবহারিক। প্রোগ্রামিং করার ব্যবস্থা আছে (কম্পিউটারে কিংবা স্মার্টফোনে) শুধু সেরকম পরিবেশে পরের অংশটুকু শিক্ষার্থীর জন্য অর্থপূর্ণ বলে বিবেচিত হবে

HTML নিয়ে কাজ শুরু করতে চাইলে প্রথমেই একটি ফাইল তৈরি করতে হবে। যে কোনো নাম দিলেই চলবে, এক্সটেনশন হবে.html। যেমন - mypage.html। এখন এই ফাইলের মধ্যে HTML কোড লিখতে হবে। ফাইলটি ব্রাউজার দিয়ে খোলা হলো, তাহলে একটি ফাঁকা পেইজ দেখা যাবে। কারণ, ফাইলটিতে এখনো কিছু লেখা হয়নি। HTML ফাইল এডিট করার জন্য যে কোনো একটি টেক্সট এডিটর ব্যবহার করলেই চলবে, যেমন- নোটপ্যাড, নোটপ্যাড++, সাবলাইম টেক্সট ইত্যাদি।

HTML উপাদান (HTML Element) একটি বইয়ে সাধারণত কী কী অংশ থাকে সেটি বিবেচনা করা যাক। বইয়ের একাধিক খণ্ড থাকতে পারে, একটি খণ্ডে একাধিক অধ্যায় থাকে। প্রতিটি অধ্যায়ে আবার শিরোনাম বা হেডিং, সাবহেডিং, অনুচ্ছেদ বা প্যারাগ্রাফ থাকতে পারে। এছাড়াও বইতে বিভিন্ন ছবি, ছবির ক্যাপশন, সারণি বা টেবিল ইত্যাদি অংশ থাকতে পারে। তেমনি একটি HTML পেইজেও বিভিন্ন অংশ বা উপাদান থাকে। এ উপাদানগুলোকে বলা হয় HTML এলিমেন্ট ( HTML Elements) ।

HTML-এর এলিমেন্ট লেখার জন্য ব্যবহার করা হয় ট্যাগ। ট্যাগকে অনেকটা ব্র্যাকেট বা বন্ধনীর সঙ্গে তুলনা করা যেতে পারে। সাধারণত এলিমেন্টের শুরু বোঝাতে একটি ওপেনিং ট্যাগ এবং শেষ বোঝাতে একটি ক্লোজিং ট্যাগ ব্যবহার করা হয়। ওপেনিং ট্যাগ, দুই ট্যাগের মধ্যবর্তী কনটেন্ট ও ক্লোজিং ট্যাগ মিলে যা হয় তা-ই একটি এলিমেন্ট। তবে কিন্তু এলিমেন্ট আছে যাদের মধ্যে কোনো কনটেন্ট থাকে না, তাই এদের ক্লোজিং ট্যাপও থাকে না। এদেরকে বলা হয় এম্পটি (empty) এলিমেন্ট।

ট্যাগ গঠিত হয় এলিমেন্টের নাম বা নামের অংশ দিয়ে। ওপেনিং ও ক্লোজিং ট্যাগের গঠন হয় এরকম, <element_name> ও < / element_name> । দুটি অ্যাঙ্গেল ব্র্যাকেটের ভেতরে এলিমেন্টের নাম লিখলে হয় ওপেনিং ট্যাগ, আর ক্লোজিং ট্যাগ হয় এ রকম, </...>। অর্থাৎ, এলিমেন্টের নামের আগে একটি অতিরিক্ত ফরওয়ার্ড স্ল্যাশ চিহ্ন (Forward Slash – 1 ) দেওয়া হয়। ওপেনিং এবং ক্লোজিং ট্যাগের ভেতরের লেখা এলিমেন্টের নাম একই হতে হবে।

নিচে একটি HTML কোড দেখানো হলো।

<!DOCTYPE html>

<html>

<body>

Hello World!

</body> </html>

কোডটি টাইপ করে ফাইলটি সেভ করে ব্রাউজারে ওপেন করলে স্ক্রিনে Hello World! লেখাটি দেখাবে।

Shello.html

X

+

O File | C:/Users/rafit/Desktop...

★

Incognito

Hello World !

উপরের কোডটি ভালো করে লক্ষ করা যাক। প্রথম লাইনে আছে <IDOCTYPE html>, যাকে বলা হয় ডকুমেন্ট টাইপ ডিক্লারেশন। এর দ্বারা ব্রাউজার বুঝতে পারে যে ডকুমেন্টটি HTML 5 স্ট্যান্ডার্ড অনুসরণ করে লেখা হয়েছে এবং সেই অনুযায়ী রেন্ডার (প্রদর্শন) করে। এটি আসলে ডকুমেন্টের অংশ নয়, তবে লেখা জরুরি।

HTML যাবতীয় এলিমেন্ট রাখতে হয় একটি মূল এলিমেন্টের ভেতরে, সেটি হচ্ছে html সেজন্য দ্বিতীয় লাইনে আছে <html> ট্যাগ, ডকুমেন্টের শেষও কিন্তু হয়েছে </html> ট্যাগ দিয়ে। এরপর আছে <body> ট্যাগ। ব্রাউজারে আমরা যা কিছু দেখি তার সবই থাকে body এলিমেন্টের ভেতরে। বড়ির ভেতরে আমরা লিখেছি Hello Worldl, এই লেখাটিই রাউজার দেখাবে।

ৰঞ্চি এলিমেন্ট যেমন আছে, তেমনি একটি হেড এলিমেন্টও আছে। ওয়েব পেইজের দৃশ্যমান সবকিছু দেওয়া হুর বস্তির ভেতরে, আর হেডের ভেতরে ওয়েব পেইজ সম্পর্কে তথ্য দেওয়া, বিভিন্ন সেটিংস ঠিক করা, স্টাইল, স্ক্রিপ্ট এসব নিয়ন্ত্রণ করা ইত্যাদি কাজ করা হয়। ব্রাউজারের ট্যাবে ওয়েবপেইজের যে শিরোনাম বা টাইটেল (title) দেখা যায় তা লেখা থাকে হেডে। উপরে তৈরি পেইজে একটি টাইটেল যুক্ত করে দেওয়া যাক।

<!DOCTYPE html>

<html> <head>

<title>My first html doc</title>

</head> <body>

Hello World!

</body> </html>

এই কোডটি লিখে সেভ করে ব্রাউজারে ওপেন করলে আগের মতোই Hello world! দেখা যাবে। একইসঙ্গে ব্রাউজারের টাইটেল বারে টাইটেলটিও দেখা যাবে। এখানে <title> </title> ট্যাগ দিয়ে ওয়েব পেইজের টাইটেল দেখানো হয়েছে।

My first html doc

File C:/Users/ralit/Desktop...✩

Incognito

Hello World!

HTML এর এলিমেন্ট লেখার নিয়ম

একটি এইচটিএমএল ডকুমেন্টে এলিফেন্টগুলো একটির পরে একটি থাকতে পারবে। আবার, একটি এলিমেন্টের ভেতর এক বা একাধিক এলিমেন্ট থাকতে পারে। তবে একটি এলিমেন্ট জন্য একটি এলিমেন্টকে সমাপতিত (overlap) করতে পারবে না। এলিমেন্টগুলোকে অসংখ্য বিভিন্ন আকারের কৌটার সঙ্গে তুলনা করা যেতে পারে। একটি বড় কৌটার ভেতরে ছোট ছোট কয়েকটি কৌটা থাকতে পারে। একটির পাশে অন্যটি বা একটির উপর অন্য কৌটা থাকতে পারে। কিন্তু কখনোই একটি কৌটা অন্য দুই বা ততোধিক কৌটার ভেতরে থাকতে পারবে না। এখানে কৌটার মুখ ও ভলাকে ওপেনিং ও ক্লোজিং ট্যাগ হিসেবে চিন্তা করা যেতে পারে।

<p> <em> Abracadabra</p> </em> ভুল <p> <em> Abracadabra </em> </p> সঠিক

ওয়েবপেইজ মেন্যু → নেভিগেশন মেন্যু

→ ওয়েবপেইজ আ → ওয়েবপেইজ টাইটেল

উইন্ডো কন্ট্রোল

→ বুকমার্ক চিহ্ন

→ বুকমার্কবার

চলবার

উইকিপিডিয়া

বাংলাদেশ

Ti

গণপ্রজাতন্ত্রী বাংলাদেশ বাংলাদেশ

ওয়েবপেইজ

ইমেজ বা ছবি

বাংলাদেশ প্রচার একটি সর্বতোষ রায়। বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। রাজনৈতিক তাই বালাদেশের পশ্চিমে পশ্চিম পশ্চিমবঙ্গ, মেঘা মায়ানমারের দিন এবং উপকূলের দিকে মদীমাতৃক বাংলাদেশ মুখের উপর দিয়ে রয়ে ে বাংলাদেশের উত্তর-পূর্বে ও দক্ষি বিশ্বে

অডিও মিডিয়া

চিত্র 4.2 : ওয়েব ব্রাউজার ও ওয়েব পেইজের বিভিন্ন অংশ

হেডিং (Heading)

খবরের কাগজ পড়ার সময় বিভিন্ন রকম শিরোনাম বা হেডিং দেখতে পাওয়া যায়। প্রধান শিরোনাম থাকে অনেক বড় অক্ষরে, তারপর আরো বিভিন্ন আকারে বিভিন্ন শিরোনাম থাকে। সেরকম এইচটিএমএল পেইজেও বিভিন্ন আকারের হেডিং দেওয়া যায়। এইচটিএমএলে ছয়টি হেডিং এলিমেন্ট রয়েছে। এগুলো যথাক্রমে h1, h2, h3,h4,h5h6 দিয়ে প্রকাশ করা হয়। এর মধ্যে h1-এর আকার সবচেয়ে বড়, h6 - এর আকার সবচেয়ে ছোট। কোনটির আকার কেমন তা জানার জন্য একটি কোড দেখানো হলো।

<!DOCTYPE html>

<html>

<head>

<title>HTML Heading</title>

</head>

<body>

<h1>This is heading 1 </h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3> <h4>This is heading 4</h4>

<h5>This is heading 5</h5> <h6> This is heading 6</h6>

</body>

</html>

কোডটি সেভ করে ব্রাউজারে ওপেন করলে এ রকম দেখা যাৰে-

HTML Heading

+

O File | C:/Users/rafit/Desktop/a.html

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

প্রয়োজনীয় কিছু এলিমেন্ট

এখন mypage.html ফাইলটিতে আরো কিছু কোড যোগ করা হলো।

<!DOCTYPE html>

<html>

<head>

<title>This is my first HTML page</title> </head> This is an html document.

<body>

Hello World !

</body> </html>

এখন ফাইলটি সেভ করে ব্রাউজারে পেইজটি রিফ্রেশ করতে হবে। ব্রাউজারের রিফ্রেশ বা রিলোড বাটন চেপে কিংবা কিবোর্ডে F5 বাটন চেপে পেইজ রিফ্রেশ করা যায়। তাহলে দেখা যাবে উপরের বডির ভেতরের দুটি লাইন ব্রাউজারে এক লাইনে দেখাচ্ছে। কোডে যদিও আলাদা আলাদা লাইনে লেখা হয়েছে।

This is my first HTML page

X

+

o Incognito

O File | C:/Users/rafit/Desktop... ★

| Hello World ! This is an html document.

তাহলে লেখাটি দুই লাইনে দেখানোর উপায় কী? সেক্ষেত্রে একটি নতুন এলিমেন্ট ব্যবহার করতে হবে যার নাম br। এটি একটি ফাঁকা বা এম্পটি এলিমেন্ট। এর কোনো ক্লোজিং বা শেষ ট্যাগ নেই।

<!DOCTYPE html>

<html> <head>

<title>This is my first HTML page</title>

</head> <body>

Hello World! <br>

This is an HTML document.

</body>

</html>

এখন ফাইলটি সেভ করে রাউজারে পেইজটি রিফ্লেশ করলে দেখা যাবে এবারে দুই লাইনে আলাদা করে

লেখাটি দেখাচ্ছে।

This is my first HTML page.

O File C:/Users/rafit/Desktop.....

Hello World! This is an HTML document.

আবার অনুচ্ছেদ (প্যারাগ্রাফ) লিখতে হলে p এলিমেন্ট ব্যবহার করতে হবে।

<IDOCTYPE html>

<html> <head>

<title>This is my first HTML page</title>

</head> <body>

Hello World! <br> <p>This is an html page. This is paragraph one.</p> <p>This

is paragraph two.</p>

</body> </html>

কোডটি সেভ করে রাউজারে ওপেন করলে নিচের মতো দেখাবে—

This is my first HTML page

File C:/Users/rafit/Desktop/a.html

Incognito

Hello World!

This is an html page. This is paragraph one.

This is paragraph two.

এখানে প্রথম ও দ্বিতীয় প্যারাগ্রাফ-এর মধ্যে কিন্তু আলাদা করে লাইন ব্রেক (<br>) দিতে হয়নি। p এলিমেন্ট নিজেই একটি ফাঁকা জায়গা তৈরি করে নিয়েছে। তবে চাইলে কোনো প্যারাগ্রাফের মধ্যেও লাইন ব্লেক দেওয়া যায়।

<p>This is an html page. This is <br> paragraph one.</p>

<p>This is paragraph two. </p>

This is my first HTML page

O File | C:/Users/rafit/Desktop...

D*

Incognito

This is an html page. This is

paragraph one.

This is paragraph two.

লাইন ব্রেকের তুলনায় প্যারাগ্রাফ ব্রেকে ক্ষেত্রে একটু বেশি পরিমাণে ফাঁকা জায়গা থাকে।

এছাড়া অনুভূমিক রেখা (horizontal line) আঁকার জন্য রয়েছে হরাইজন্টাল রুল এলিমেন্ট। একে hr দিয়ে প্রকাশ করা হয়। এটিও একটি ফাঁকা এলিমেন্ট।

<p>This is an html page. This is paragraph one. </p> <hr> <p>This is paragraph two. </p>

This is my first HTML page

O File | C:/Users/rafit / Desktop...

This is an html page. This is paragraph one.

This is paragraph two.

Incognito

টেক্সট ফরম্যাটিং (Text Formatting)

টেক্সটের সাধারণ ফরম্যাটিংয়ের মধ্যে আছে বোল্ড করা, ইটালিক করা, আন্ডারলাইন করা ইত্যাদি। HTML এ এগুলো করার জন্য যথাক্রমে b, 1 ও u এলিমেন্ট ব্যবহার করা হয়।

<!DOCTYPE html>

<html>

<head> <title>Text Formating</title>

</head> <body>

<p>This is normal text</p>

<p><b>This is bold text</b></p> <p><i>This is italic text</i></p> <p><u>This is underlined text</u></p>

</body>

</html>

X

Text Formating

+

File C:/Users/rafit/Desktop...✩

Incognito

This is normal text

This is bold text

This is italic text

This is underlined text

আরো কিছু সাধারণ ফরম্যাটিংয়ের মধ্যে আছে সুপারস্ক্রিপ্ট (লেখাকে উপরে উঠানো), সাবস্ক্রিপ্ট (নিচে

নামানো) ইত্যাদি।

<p>This line contains a ^superscript and a

_subscript.</p>

<p> (a + b) ² a²+2ab+ = b²</p> <p>f_n f_n-1 f_n-2</p>

+

<!DOCTYPE html>

<html>

<head> <title>Text Formating</title>

</head> <body>

<p>This is normal text</p>

<p><b>This is bold text</b></p> <p><i>This is italic text</i></p> <p><u>This is underlined text</u></p>

</body>

</html>

X

Text Formating

+

File C:/Users/rafit/Desktop...✩

Incognito

This is normal text

This is bold text

This is italic text

This is underlined text

আরো কিছু সাধারণ ফরম্যাটিংয়ের মধ্যে আছে সুপারস্ক্রিপ্ট (লেখাকে উপরে উঠানো), সাবস্ক্রিপ্ট (নিচে

নামানো) ইত্যাদি।

<p>This line contains a ^superscript and a

_subscript.</p>

<p> (a + b) ² a²+2ab+ = b²</p> <p>f_n f_n-1 f_n-2</p>

+

Text Formating

+

File C:/Users/rafit/Desktop...

This line contains a super,

Incognito

এছাড়াও কোনো টেক্সটকে সাধারণের চেয়ে বড় বা ছোট করার জন্য big a small নামের দুটি এলিমেন্ট

আছে।

(a + b) 2 = a 2 + 2ab + b2

ascript and a subscript.

কখনো কখনো পেইজের কোনো নির্দিষ্ট অংশকে বিশেষভাবে দৃষ্টিগোচর (emphasize) করানোর প্রয়োজন হয়। আবার কখনো কখনো বক্তব্যের কোনো নির্দিষ্ট অংশকে বিশেষ জোর দিয়ে বলার (লেখার) প্রয়োজন হয়। এই দুটি কাজের জন্য রয়েছে em ও strong নামের দুটি এলিমেন্ট।

<p>The word <em>Emphasize</em> means giving special value to something.

| The word <strong> Strong </strong> is something stronger than

emphasizing.</p>

Text formating

File

C/Users/rafit/Desktop... ☆

Incognito

The word Emphasize means giving special value to sth. The word Strong is sth stronger

than emphasizing.

E

তালিকা বা লিস্ট (List)

এইচটিএমএল-এ তালিকা তৈরির জন্য আছে ul, ol এবং || ট্যাপ।

নিচে বাংলাদেশের বিভাগগুলোর তালিকা তৈরির কোড দেখানো হলো।

<!DOCTYPE html>

<html>

<head> <title> HTML List Demo</title>

</head> <body>

<ul>

<11>Dhaka</li>

<li>Rajshahi</li> <li>Chattogram</li>

<li>Khulna </li>

<li>Rangpur </li> <li> Barishal</li>

<li>sylhet</li>

<li>Mymensingh</li>

</ul> </body>

</html>

উপরের কোডের আউটপুট দেখাবে নিচের মতো ।

X

✔ HTML List Demo

O File | C:/Users/rafit/Desktop/a.html

• Dhaka

Rajshahi

• Chattogram • Khulna

• Rangpur

• Barishal

• Sylhet

• Mymensingh

চিত্ৰ 4.5 : তালিকা বা লিস্ট আকারে বাংলাদেশের বিভিন্ন বিভাগের নাম

এখানে লিস্টের জন্য দুটি এলিমেন্ট ব্যবহার করা হয়েছে, ul এবং III ul মানে আনঅর্ডারড লিস্ট (unordered list) এবং li মানে লিস্ট আইটেম (list item)। ক্রমবিহীন তালিকা তৈরি করতে ul এলিমেন্ট ব্যবহার করা হয়। || এলিমেন্ট ব্যবহার করা হয় তালিকার উপাদানগুলো রাখতে। আর ক্রমসহ তালিকা তৈরি করতে ul-এর পরিবর্তে ol ব্যবহার করতে হবে। এখানে ol মানে অর্ডারড লিস্ট (ordered list) |

HTML-এ তালিকার ভেতরেও তালিকা তৈরি করা যায়। যেমন— সিলেট বিভাগের জেলাগুলো যদি তালিকায় থাকে,

• Barishal
• Sylhet

        o Sunamganj

          o Sylhet

          o Habiganj Moulvibazar

• Mymensingh

এরকম তালিকার ভেতরে তালিকা বা নেস্টেড তালিকা (nested list) তৈরি করার জন্য লিস্টের ভেতরে আরেকটি লিস্ট ঢুকিয়ে দিতে হবে।

<body> <ul>

<li>Dhaka </li>

<li>Rajshahi </li>

<li>Rangpur </li>

<li>Chattogram</li> <li>Khulna</li> <li> Barishal</li> <li>Sunamganj</li> <li> Habiganj </li> <li> Moulvibazar </li>

<li>Sylhet</li>

<ul>

<li>Sylhet</li>

</ul>

<li> Mymensingh</li>

</ul>

</body>

উপরের কোডটি একটি HTML ডকুমেন্টে রাখলে নিচের ছবির মতো আউটপুট দেখা যাবে।

Text Formating

File C:/Users/rafit/Desktop... ✰

Incognito

• Dhaka

• Rajshahi

• Chattogram • Khulna

• Rangpur

• Barishal • Sylhet

Sunamganj

Sylhet Habiganj

• Moulvibazar

• Mymensingh

চাইলে এভাবে জেলার ভেতরে উপজেলারও আরেকটি লিস্ট তৈরি করা যায়।

যখন ক্রমবিহীন (unordered) কোনো তালিকা তৈরি করা হয়, তখন তালিকার উপাদানের আগে সাধারণভ বিভিন্ন ধরনের চিহ্ন ব্যবহার করা হয়। HTML এ একটি গোল কালো ফোঁটা (ভিন্ন- disc) চিহ্ন ব্যবহার করা হয়। তবে চাইলে এখানে সার্কেল (circle) বা ক্ষরার (square)-ও ব্যবহার করা যায়। সেজন্য এইচটিএমএল উপাদানের ভেতরে জ্যাট্রিবিউট (attribute) ব্যবহার করতে হবে। অ্যাট্রিবিউট হচ্ছে এলিমেন্টের একটি অংশ যা এলিমেন্টের কার্যক্ষমতা বা ফাংশনালিটি বৃদ্ধি করে। একটি এলিমেন্টের একাধিক অ্যাট্রিবিউট থাকতে পারে, আবার নাও থাকতে পারে।

অ্যাট্রিবিউট লেখার নিয়ম নিচের মতো-

<tag_name attribute_name = "value">

অর্থাৎ অ্যাট্রিবিউটের নামের পর একটি সমান চিহ্ন দিয়ে ডাবল কোটেশনের ভেতরে এর মান লিখতে হয়। ডালিকায় স্কয়ার বা সার্কেল চিহ্ন ব্যবহার করতে চাইলে type নামের একটি অ্যাট্রিবিউট ব্যবহার করতে

হবে।

<ul type="square"> <li>item 1</li> <li>item 2</li>

</ul>

পূর্বের কোডটি লিখলে লিস্ট আইটেমে বর্গাকৃতি চিহ্ন ব্যবহৃত হবে। একইভাবে <ul type="circle"> বসালে

বৃত্তাকৃতি চিহ্ন ব্যবহৃত হবে।

এইচটিএমএল কোড

<ul type="square"> <li>Item 1</li>

Item 1 Item 2

<li> Item 2</li>

</ul>

<ul type="circle">

Item 1

<li> Item 1</li> <li>Item 2</li>

Item 2

</ul>

<ul type="disc">

<li> Item 1</li>

<li> Item 2</li>

Item 1 Item 2

</ul>

আউটপুট

অর্ডারড লিস্টের ক্ষেত্রেও বিভিন্ন পদ্ধতি অনুসরণ করা যায়। যেমন— ছোট হাতের বা বড় হাতের রোমান হরফ (i, ii, iii বা I, II, III) অথবা ইংরেজি হরফ (a, b, c, A, B, C) ইত্যাদি। এখানেও type অ্যাট্রিবিউট ব্যবহার করতে হবে।

আউটপুট

i. Item 1 ii. Item 2

এইচটিএমএল কোড Kol type="">

<li> Item 1</li> <li> Item 2</li>

</ol>

kol type = "T"> <li> Item 1</li>

I. II.

Item 1 Item 2

<li>Item 2</li>

</ol>

<ol type="a">

<li> Item 1</li> <li> Item 2</li>

</ol>

Kol type="A">

<li> Item 1</li> <li>Item 2</li>

</ol>

Kol type="1">

<li>Item 1</li> <li> Item 2</li>

</ol>

২০২১ - 2022

a. Item 1

b. Item 2

A. Item 1

B. Item 2

1. Item 1 2. Item 2

অর্ডারড লিস্টে আবার কখনো কখনো কোনো নির্দিষ্ট সংখ্যা থেকে শুরু করতে হতে পারে। যেমন— কোনো ক্লাসের 21 থেকে 30 রোলধারী শিক্ষার্থীর তালিকা দেখাতে হতে পারে। এক্ষেত্রে start অ্যাট্রিবিউট ব্যবহার করতে হবে। টাইপ a, A, i যাই হোক না কেন, start অ্যাট্রিবিউটের মান সব সময় সংখ্যা (numeric) হবে।

<ol type="1" start="21">

<li>Nayeem Sheikh</li> <li>Robiul Hasan</li>

</ol>

হাইপারলিংক (Hyperlink)

ইন্টারনেটে বিভিন্ন ওয়েটসাইট ভিজিট করার সময় বিভিন্ন লিংকে ক্লিক করা যায়। লিংকে ক্লিক করলে এক পেইজ থেকে অন্য পেইজে বা একই পেইজের বিভিন্ন অংশে যাওয়া যায়। লিংক মানে সংযোগ। এক পেইজের সঙ্গে অন্য পেইজের বা একই পেইজের বিভিন্ন অংশের মধ্যে যে সংযোগ করার পদ্ধতি, তাকে লিংক বলে। এই লিংক যখন হাইপারটেক্সটে HTML-এ থাকে তখন তাকে হাইপারলিংক বলে।

একটু আগে বাংলাদেশের বিভাগগুলোর যে তালিকা তৈরি করা হয়েছিল সেই তালিকায় এখন হাইপারলিংক যুক্ত করা হবে যেন Dhaka লেখাটিতে ক্লিক করলে ঢাকা বিভাগের ওয়েবসাইটে যাওয়া যায়। সেজন্য যে

এলিমেন্টটি ব্যবহার করতে হবে তার নাম অ্যাংকর (anchor)। এর প্রথম অক্ষর a নিয়ে এই এলিমেন্টের ট্যাগ গঠিত।

<li><a href="http://www.dhakadiv.gov.bd"> Dhaka</a></li>

ব্রাউজারে গিয়ে পেইজটি রিফ্রেশ করলে দেখা যাবে যে Dhaka লেখাটি নীল রঙের এবং আন্ডারলাইন করা হয়ে গিয়েছে। ওতে ক্লিক করলেই ঢাকা বিভাগের ওয়েবসাইটে যাওয়া যাবে। ঢাকা বিভাগের ওয়েবসাইটের address বা URL (URL: Uniform Resource Locator) বসানো হয়েছে href অ্যাট্রিবিউটের মাধ্যমে।

নিজে করি ১ : এখন উপরের কোডটি সম্পূর্ণ করতে হবে, যেন প্রত্যেকটি বিভাগের নামে ক্লিক করলে সংশ্লিষ্ট বিভাগের ওয়েবসাইট খুলে যায়।

আবার যদি এমন প্রয়োজন হয় যে, লিংকে ক্লিক করলে সেটি ওয়েব ব্রাউজারের নতুন একটি ট্যাবে খুলুক, তাহলে আরেকটি অ্যাট্রিবিউট ব্যবহার করা যায়, সেটি হলো target অ্যাট্রিবিউট। target অ্যাট্রিবিউটের মান হিসেবে _self ব্যবহার করলে লিংকটি একই ট্যাবে খুলবে, আর _blank ব্যবহার করলে একটি নতুন ট্যাবে খুলবে।

<li><a href="http://www.dhakadiv.gov.bd " target="_blank">Dhaka</a></li>

ছবি বা ইমেজ (Image )

ওয়েবপেইজে ছবি যোগ করতে img এলিমেন্ট ব্যবহার করা হয়। এটি একটি এম্পটি এলিমেন্ট, অর্থাৎ এর

কোনো ক্লোজিং বা শেষ ট্যাগ নেই।

<!DOCTYPE html>

<html>

<head>

<title> Image in html </title> </head>

<body>

<img src="image.jpg">

</body> </html>

কোডটি যে ফোল্ডারে আছে, সেই ফোল্ডারে পছন্দমতো একটি ছবি এনে image.jpg নাম দিয়ে দিতে হবে।

এবার ব্রাউজারে ফাইলটি ওপেন করলে ছবিটি ওয়েবপেইজে দেখা যাবে।

এখানে src (source-এর সংক্ষিপ্ত রূপ) নামের একটি অ্যাট্রিবিউট ব্যবহার করে ছবিটির URL বলে দেওয়া হয়েছে। এই URL কোনো ওয়েবসাইটের কোনো ছবির ঠিকানাও হতে পারে। অন্য কোনো ফোল্ডারের ছবি দেখাতে হলে তাহলে এর মান হিসেবে ছবির পুরো পাথ (path) বসাতে হবে। যেমন— D: \ ড্রাইভের My Pictures ফোল্ডারে image.jpg নামের একটি ছবি দেখাতে হবে এভাবে—

<img src="D / My Pictures/image.jpg">

ছবিটি যদি আকারে বেশ বড় হয় তাহলে হয়তো দেখা যাবে ব্রাউজারে পুরো ছবিটির অংশবিশেষ দেখা যাচ্ছে মাত্র। ছবিটি ঠিকমতো দেখার জন্য তখন ছবির আকার নিয়ন্ত্রণ করতে হবে। ছবির আকার নিয়ন্ত্রণ করার জন্য width ও height নামে দুটি অ্যাট্রিবিউট রয়েছে। ছবিটিকে 300 x 200 পিক্সেল আকারে দেখাতে চাইলে, নিচের মতো কোড লিখতে হবে।

<img src="image.jpg" width="300px" height="200px">

কখনো কখনো বিভিন্ন ওয়েবসাইটে কোনো ছবিতে ক্লিক করলে নতুন পেইজ ওপেন হয়। অর্থাৎ, ছবিটি হাইপারলিংক করা থাকে।

<a href="https://www.google.com" target="_blank">

<img src="image.jpg">

</a>

অর্থাৎ <a>....... </a> ট্যাগের মধ্যে কিছু না লিখে একটি ছবি ব্যবহার করা হলো।

সারণি বা টেবিল (Table)

এইচটিএমএল ব্যবহার করে সারণি বা টেবিল তৈরি করা যায়। টেবিলের আনুভূমিক ঘরগুলোকে বলা হয় সারি বা রো (row), আর উল্লম্ব ঘরগুলোকে বলা হয় স্তম্ভ বা কলাম (column)। টেবিলের একেকটি ঘরকে বলা হয় সেল (cell)। টেবিলের একেবারে উপরের সারিকে বলা হয় হেডার সারি (header) আর একেবারে নিচের সারিকে বলা হয় ফুটার (footer) সারি। তবে হেডার ও ফুটার সারি টেবিলের ঐচ্ছিক উপাদান, অর্থাৎ, সব টেবিলে এ দুটি অংশ নাও থাকতে পারে।

<!DOCTYPE html>

<html>

<head>

<title>HTML Table Example</title>

</head> <body>

<table>

<thead>

<tr> <th>Serial </th> <th>Subject </th> <th>GPA </th>

</tr>

</thead>

<tbody>

<tr> <td>01</td> <td>Bangla </td> <td>500</td> </tr> <tr> <td>02</td> <td>English </td> <td>500</td> </tr> <tr> <td>03</td> <td> Science</td> <td>5.00</td> </tr> <tr> <td>04 </td> <td>Math </td> <td>500</td> </tr>

</tbody> <tfoot >

<tr> <td></td> <td>CGPA </td> <td>500</td> </tr>

</tfoot> </table>

</body>

</html>

কোডটি সেভ করে ব্রাউজারে খুললে নিচের ছবির মতো আউটপুট দেখা যাবে।

HTML Table Example

O File | C:/Users/rafit/Desktop...

Incognito

Serial Subject GPA

01 Bangla 5.00

02 English 5.00

03 Science 5.00

04 Math 5.00

CGPA 5.00

প্রতিটি টেবিল বর্ণনা করা হয় একটি table এলিমেন্ট দিয়ে। এই এলিমেন্টের ভেতরে আবার তিন ধরনের এলিমেন্ট থাকতে পারে। এগুলো হচ্ছে টেবিলের তিনটি অংশ, যথাক্রমে হেডার (header), বড়ি (body) ও ফুটার (footer)। এগুলো যথাক্রমে thead, thody ও tfoot এলিমেন্ট দিয়ে প্রকাশ করা হয়। টেবিল নিয়ে কাজ করতে হলে একেকটি রো বা সারি নিয়ে কাজ করতে হয়। সেজন্য আছে tr বা table row এলিমেন্ট। এর কাজ হচ্ছে টেবিলের একটি সারি তৈরি করা। দশটি সারি দরকার হলে দশটি tr এলিমেন্ট ব্যবহার করতে হবে। হেডার অংশে টেবিলের হেডিং বসাতে th এলিমেন্ট ব্যবহার করা হয়। ব্রাউজারে গেলে দেখা যাবে, হেডিং অংশটি বোল্ড করা আছে। যে কয়টি হেডিং লাগবে সে কয়টি th এলিমেন্ট ব্যবহার করতে হবে।

টেবিলের বডিতে tr এলিমেন্ট দিয়ে সারি তৈরি করা হয়। এরপর তথ্য (data) রাখার জন্য ব্যবহার করা

হয় td (অর্থ, table data) এলিমেন্ট।

এই টেবিলে কোনোরকম বর্ডার ব্যবহার করা হয়নি। তবে চাইলে এভাবে table এলিমেন্টে বর্ডারের কথা

উল্লেখ করে দেওয়া যায়, border অ্যাট্রিবিউট যোগ করে ।

<table border="1">

কিন্তু এভাবে বর্ডার ব্যবহার করলে প্রতিটি সেল বা ঘরের আশেপাশে দুটি করে বর্ডার দেখা যাবে।

X

HTML Table Example

o File

C:/Users/rafit/Desktop...

个

|

★

Incognito

Serial

Subject

01 Bangla 5.00

GPA

+

02

5.00

03 Science 5.00

English

04

5.00

Math CGPA 5.00

এটি দূর করতে চাইলে ঘরগুলো ফাঁকা ফাঁকা না রেখে একটির সঙ্গে অন্যটি একেবারে লাগিয়ে রাখতে হবে। এজন্য, ব্যবহার করতে হবে cellspacing অ্যাট্রিবিউট এবং মান দিতে হবে O। এর মান যত দেওয়া হবে, টেবিলের সেলগুলো একে অপরের থেকে তত পিক্সেল দূরে হবে।

<table border="1" cellspacing="0">

টেবিলের সেলগুলোতে অবস্থিত লেখা সেল থেকে একটি নির্দিষ্ট দূরত্বে থাকে। প্রয়োজনবোধে সেই দূরত্ব নিয়ন্ত্রণ করা যায়। এজন্য ব্যবহার করতে হবে cellpadding অ্যাট্রিবিউট।

<table border="1" cellpadding="20">

উপরের টেবিলটিতে বর্ডার দেওয়ার পর এর ফুটারে যে একটি ফাঁকা ঘর আছে তা ভালোভাবে বোঝা যাচ্ছে

এখন এইচটিএমএল দিয়ে টেবিল তৈরির আরেকটি উদাহরণ দেখানো হবে।

Bill Summary

C

X

O File | C:/Users/rafit/Desktop/a.html

Bill Summary

Month

Bills

Electricity

Water Gas

January

| February 955

809

600

720

850

700

March

1123

812

775

✩

চিত্র 4.6 : এরকম একটি টেবিল কীভাবে তৈরি করবে?

উপরের টেবিলে লক্ষণীয় বিষয়গুলো হচ্ছে :

টেবিলের উপরে একটি ক্যাপশন রয়েছে।

Month সেলটি দুটি রো জুড়ে রয়েছে।

Bills সেলটি তিনটি কলাম জুড়ে রয়েছে। বাকি সেলগুলো সাধারণভাবে আছে ।

টেবিলের ক্যাপশন দিতে caption নামে একটি এলিমেন্ট ব্যবহার করতে হবে। কয়েকটি রো জুড়ে একটি সেল তৈরি করতে ব্যবহার করতে হয় rowspan অ্যাট্রিবিউট, আর কয়েকটি কলাম জুড়ে একটি সেল তৈরি করতে ব্যবহার করতে হয় colspan অ্যাট্রিবিউট। ছবির টেবিলটির এইচটিএমএল কোড নিচে দেওয়া হলো।

<!DOCTYPE html>

<html> <head>

<title>HTML Table Example</title>

</head> <body>

<table border="1" cellspacing="0" cellpadding="2"> <caption>Bill Summery</caption>

<thead>

The first th element will span two rows. Second th Element will span three columns.

-->

<tr>

<th rowspan="2"> Month </th> <th colspan="3">Bills </th> </tr>

<tr><th>Electricity</th> <th> Water </th> <th>Gas</th> </tr>

On the second row, the first th element will go to Second column. Because second row of first column is spanned by first row. -->

</thead>

<tbody> <tr>

<td>January</td> <td>513</td> <td>53 </td> <td>217</td> </tr>

<tr>

<td>February</td> <td>522</td> <td>59 </td> <td>202 </td>

</tr> <tr>

<td>March</td> <td>578 </td> <td>62</td> <td>224 </td>

</tr>

</tbody> </table>

</body> </html>

উপরের কোডে দুই জায়গায় <!-- ও --> চিহ্নের মধ্যে কিছু কথা লেখা হয়েছে। সেখানে বলা হয়েছে যে কোডের thead অংশের কাজ কী। একে বলা হয় কমেন্ট (comment)। ব্রাউজারে যখন ডকুমেন্টটি প্রদর্শিত হবে তখন এই কমেন্ট করা অংশটুকু দেখা যাবে না। ডেভেলপাররা নিজেদের সুবিধার জন্য কমেন্ট করে থাকেন। একজনের লেখা কোড যখন অন্যজন পড়েন, তখন এই কমেন্ট দেখে তিনি সহজেই বুঝতে পারেন কোডের কোন অংশের কাজ কী এবং উদ্দেশ্য কী।

টেবিলের কোনো সেলে হাইপারলিংক যোগ করার প্রয়োজন হলে সাধারণ নিয়মে td বা th এলিমেন্টের ভেতরে a এলিমেন্ট বসাতে হবে। একইভাবে টেবিলের সেলে ছবিও যোগ করা যায়। তবে ছবির ক্ষেত্রে তার আকার নিয়ন্ত্রণ করা খুব গুরুত্বপূর্ণ, না হলে টেবিলটি দেখতে দৃষ্টিনন্দন হবে না।

<td><a href="https://www.google.com"> Google</a> </td>

ওয়েব পেইজে বাংলা দেখানো

নিচের কোডে ওয়েব পেইজে কীভাবে বাংলা লেখা যায় তা দেখানো হলো।

<!DOCTYPE html>

<html>

<head>

<title>Bangla Text in webpage</title>

</head>

<body>

<p> এইচটিএমএল একটি মার্কআপ ভাষা। এটি শেখা খুবই সহজ।</p>

</body> </html>

তবে কিছু কিছু কম্পিউটারে সরাসরি বাংলা লেখা না-ও দেখা যেতে পারে। সব কম্পিউটারে বাংলা লেখা ঠিকভাবে দেখানোর জন্য meta নামের একটি ফাঁকা এলিমেন্ট এবং charset নামের একটি অ্যাট্রিবিউট ব্যবহার করতে হবে। meta এলিমেন্টটি head এলিমেন্টের ভেতরে থাকবে, কারণ এটি পেইজের একটি সেটিংস পরিবর্তন বা ঠিক করছে।

<!DOCTYPE html> <html_lang="bn">

<head>

<title>Bangla Text in webpage</title> <meta charset="utf-8">

</head> <body>

<p>এইচটিএমএল একটি মার্কআপ ভাষা। এটি শেখা খুবই সহজ।</p>

</body> </html>

এখানে charset="utf-8" দিয়ে বোঝানো হয়েছে যে লেখাগুলো দেখানোর জন্য UTF-8 ক্যারেক্টার সেট বা অক্ষরসমষ্টি ব্যবহার করতে হবে। UTF-8 হচ্ছে জনপ্রিয় একটি ইউনিকোড ক্যারেক্টার সেট। এটি বাংলা লেখা সমর্থন করে।

এর পাশাপাশি কোডটিতে html এলিমেন্টেও নতুন একটি অ্যাট্রিবিউট যোগ করা হয়েছে, যেটি হচ্ছে lang অ্যাট্রিবিউট। lang অ্যাট্রিবিউটের কাজ হচ্ছে ডকুমেন্টটি কোন ভাষায় লেখা হয়েছে তা ওয়েব ব্রাউজারকে জানানো। কোনো ভাষার যদি একাধিক উপভাষা থাকে, তাহলে ভাষার পাশাপাশি দুই অক্ষরের অঞ্চল কোড (রিজিওন কোড— region code) বসাতে হয়। যেমন— আমেরিকান ইংরেজির জন্য en-US, বাংলাদেশি বাংলার জন্য bn-BD ইত্যাদি।

div ও span এলিমেন্ট

একটি ডকুমেন্টে বিভিন্ন অংশ থাকে। এসব অংশের কাজ একেক রকম হয়। তাই এদের গঠন ও চেহারাও ভিন্ন হয়। এই অংশগুলোকে আলাদা করতে ব্যবহার করা হয় div এলিমেন্ট। span এলিমেন্টের কাজ হচ্ছে একটি এলিমেন্টের নির্দিষ্ট একটি অংশ নির্বাচন করা। ধরা যাক, একটি প্যারাগ্রাফ কালো রঙে দেখানো আছে। মধ্যে তিনটি শব্দ লাল রং করতে হবে। তখন ওই তিনটি শব্দের দুই পাশে span এলিমেন্টের ট্যাগ বসিয়ে style অ্যাট্রিবিউট ব্যবহার করে রং নির্ধারিত করে দেওয়া যায়।

<p>This is a black text. But <span style="color: red; ">This is red</span> </p>

স্টাইল অ্যাট্রিবিউট (style attribute)

স্টাইল অ্যাট্রিবিউট ব্যবহার করে ওয়েব পেইজের বিভিন্ন এলিমেন্টের রং, ফন্টসহ বিভিন্ন বৈশিষ্ট্য বা প্রোপার্টি (property) উল্লেখ করে দেওয়া যায়। স্টাইল অ্যাট্রিবিউটের ভেতরে বিভিন্ন স্টাইলিং নির্দেশনা দেওয়া যায়। যেমন— এর আগের অংশে দেখানো হয়েছে কীভাবে স্টাইল অ্যাট্রিবিউট ব্যবহার করে লাল রঙে লেখা যায়। এজন্য color প্রোপার্টি ব্যবহার করা হয়েছে। বিভিন্ন এইচটিএমএল এলিমেন্টের বিভিন্ন প্রোপার্টি আছে। একাধিক প্রোপার্টির মান বলে দিতে চাইলে তাদের মধ্যে সেমিকোলন চিহ্ন ব্যবহার করতে হয়।

<!DOCTYPE html>

<html> <head>

<title>style Attribute Experiment</title>

</head> <body>

<div style="width: 100px; height: 100px; background-color: pink; color: darkred; float: left; margin: 5px; padding: 5px; ">Hello There! </div>

<div style="width:100px; height:100px; background-color: paleturquoise; color: forestgreen; float: left; margin: 5px; padding: 5px;"> How are you!</div>

<div style="width:100px; height:100px; background-color: lightskyblue; color: royalblue; float: left; margin: 5px; padding: 5px;">Nice to meet you! </div>

</body> </html>

উপরের কোডটি ছবির মতো আউটপুট তৈরি করবে।

+

Style Attribute Experiment

File C:/Users/rafil/Desktop... ✰

Hello There!

How are you!

Nice to meet you!

X

Incognito

আবার একই স্টাইল একাধিক এলিমেন্টে ব্যবহার করতে চাইলে, <head>...</head> অংশের ভিতরে আলাদাভাবে style ট্যাগ দিয়ে সেগুলো বলে দেওয়া যায়। নিচের উদাহরণটিতে সেটি দেখানো হলো-

<!DOCTYPE html>

<html>

<head>

<title>Style Attribute Experiment</title>

<style type="text/css">

div {

width:100px;

height: 100px;

margin: 10px; padding: 10px;

float: left; font-family: sans-serif; font-size: large; text-align: center;

border: 2px solid rgba(0, 0, 0, 0.2); border-radius: 5px;

}

</style>

</head> <body>

<div style="background-color: pink; color: darkred; ">Hello

There!</div>

<div style="background-color: paleturquoise; color: forestgreen;">How are you! </div>

<div style="background-color: lightskyblue; color: royalblue;">Nice to meet you! </div>

</body>

</html>

এখানে style ট্যাপে বলে দেওয়া হয়েছে যাবতীয় div এলিমেন্টের স্টাইল কেমন হবে, অর্থাৎ, width হবে 100 পিক্সেল, height হবে 100 পিক্সেল ইত্যাদি। আর প্রতিটি আলাদা div এলিমেন্টে তাদের নিজস্ব রং (color) ও পেছনের পর্দার রং (background-color) বলে দেওয়া হয়েছে। এভাবে স্টাইল ট্যাগ ব্যবহার করে বিভিন্ন এলিমেন্টের রূপ পরিবর্তন করা যায়।

Style Attribute Experiment

File C:/Users/rafit/Desktop... ✩

X

Incognito

Hello There!

How are you!

Nice to meet you!

এখানে কিছু প্রোপার্টির নাম ও তাদের ব্যবহার দেখানো হলো—

প্রোপাটির নাম

ব্যবহার

উপাদানের প্রস্থ নির্ধারণ করা

width height

font-family

উপাদানের উচ্চতা নির্ধারণ করা

ফন্ট নির্ধারণ করা

font-size

margin

ফন্টের আকার নির্ধারণ করা

padding

অন্যান্য উপাদান থেকে দূরত্ব নির্ধারণ করা উপাদানের সীমানা থেকে এর ভেতরের উপাদানগুলোর দূরত্ব

নির্ধারণ করা

উপাদান সীমানা দেখতে কেমন হবে তা নির্ধারণ করা

border

text-align

উপাদানের ভেতরের লেখা কীভাবে বিন্যস্ত করা হবে তা নির্ধারণ করা। (যেমন- left, right, center ইত্যাদি)

color

উপাদানের রং নির্ধারণ করা উপাদানের পেছনের পর্দার রং নির্ধারণ করা

background-color

ফন্ট ফ্যামিলির কাজ হলো ফন্ট নির্ধারণ করা। Sans serif ফন্ট হলো simple typer font যেগুলোর প্রতিটি অক্ষরের প্রান্তে কোনো stroke ব্যবহার করা হয় না। পূর্বের কোডে ngba উল্লেখ করা হয়েছে। এখানে ingba न red, green, blue, alpha । এখানে আলফা প্যারামিটারের সংকর মান 0.0 হতে 1.0 এর মধ্যে হবে সবসময়। এক্ষেত্রে যেহেতু red, green, blue এই তিনটিতে ভেল্যু 0 দেয়া হয়েছে সেক্ষেত্রে 0, 0, 0 এর জন্য আসবে full white এবং 0.2 এর জন্য হালকা black, এই মান যতো বাড়বে রঙ ততো গাঢ় হতে থাকবে। আমরা এখানে তিনটি সেনটেন্সকে div এলিমেন্ট দ্বারা আলাদা করে এদের জন্য বিভিন্ন ব্যাকগ্রাউন্ড এবং ফন্ট কালার নির্বাচন করেছি।

একটি ভালো ওয়েবসাইট তৈরি করতে হলে প্রথমে সুন্দর একটি ডিজাইন তৈরি করে নিতে হয়। এই ডিজাইন প্রক্রিয়ার সময় নানাবিধ বিষয় মাথায় রাখতে হয়। তার মধ্যে গুরুত্বপূর্ণ বিষয়গুলো হলো, ওয়েবসাইটটি ব্যবহারকারীদের কাছে সুন্দর ও দৃষ্টিনন্দন লাগছে কি না এবং ওয়েবসাইটের বিভিন্ন ফিচার ব্যবহারকারীরা সহজে খুঁজে পাচ্ছে কি না এবং ব্যবহার করতে পারছে কি না।

ওয়েবসাইটের ধরন অনুযায়ী তার ডিজাইন নির্ভর করে। উদাহরণস্বরূপ, একটি প্রশ্নোত্তরের ওয়েবসাইট তৈরি করার কথা ভাবা যাক, যেখানে বিভিন্ন ব্যবহারকারী প্রোগ্রামিং সংক্রান্ত বিভিন্ন বিষয়ে প্রশ্ন করতে পারবে এবং প্রশ্নের উত্তর দিতে পারবে। এজন্য প্রথমে নির্ধারণ করে নিতে হবে ওয়েবসাইটে কী কী ফিচার থাকবে। যেমন ওয়েবসাইটে নিচের ফিচারগুলো থাকতে পারে।

• ব্যবহারকারীরা ওয়েবসাইটে রেজিস্ট্রেশন ও লগইন করতে পারবে
• ওয়েবসাইটে ব্যবহারকারী প্রশ্ন পোস্ট করতে পারবে
• ওয়েবসাইটে ব্যবহারকারী প্রশ্নের উত্তর পোস্ট করতে পারবে
• প্রশ্নকর্তা সবচেয়ে গ্রহণযোগ্য উত্তরটি সঠিক বলে চিহ্নিত করতে পারবে
• ব্যবহারকারীরা অন্যের করা প্রশ্ন বা উত্তর গুরুত্বপূর্ণ মনে করলে তাতে ভোট দিয়ে পারবে
• ভালো প্রশ্ন বা ভালো উত্তর (যেগুলোতে বেশি ভোট পড়েছে)-এর জন্য প্রশ্নকর্তা ও উত্তরদাতা পয়েন্ট পাবে।

এরপরে চিন্তা করতে হবে ওয়েবসাইটে কী কী পেইজ থাকবে। প্রতিটি পেইজের জন্য একটি লেআউট ডিজাইন করতে হবে। লে-আউট বলতে বোঝানো হচ্ছে পেইজের কোন স্থানে কী দেখানো হবে। এই ডিজাইনটি প্রাথমিকভাবে কাগজে-কলমে করা যেতে পারে। এ জাতীয় কাগজ-কলমে আঁকা ডিজাইনকে বলা হয় ওয়ারফ্রেম (wireframe)। ধরা যাক, একটি প্রশ্ন ও তার সংশ্লিষ্ট উত্তরগুলোর পেইজটি এরকম (পরের ছবি দ্রষ্টব্য) হতে পারে। আবার চাইলে কোনো গ্রাফিক্স ডিজাইন সফটওয়্যার, যেমন— অ্যাডোবি ইলাস্ট্রেটর (Adobe Illustrator) বা গিম্প (Gimp) ইত্যাদি ব্যবহার করেও এ জাতীয় ডিজাইন তৈরি করা যায়।

View

Help

https://stackoverflow.com/

Q

Fle

Logo

Home

Question

Category

User

Lorem ipsum dolor sit amet, consectetur

Username

Password

Remen

Sign

f Sign in

G Sign in

um um

চিত্র 4.7 প্রশ্নোত্তর ওয়েবসাইটের একটি পেইজের ডিজাইন

এভাবে বিভিন্ন পেইজের ডিজাইন হয়ে গেলে এরপরে এর ডেভেলপমেন্ট শুরু করতে হবে। বিভিন্ন পেইজের ডিজাইন অনুযায়ী HTML ও CSS ব্যবহার করে পেইজগুলো তৈরি করতে হবে। একে বলে ওয়েবসাইটের ফ্রন্ট-এন্ড ভেভেলপমেন্ট (Front-end development)। বাস্তবে ফ্রন্ট-এন্ড ডেভেলপমেন্টে HTML, CSS এর পাশাপাশি আরো অনেক প্রোগ্রামিং ভাষা, সফটওয়্যার ও লাইব্রেরি ব্যবহার করা হয়, যেগুলো এই বইতে আলোচনা করা হয়নি।

পাশাপাশি কোনো একটি প্রোগ্রামিং ভাষা ব্যবহার করে ওয়েবসাইটে বিভিন্ন ফিচার ইমপ্লিমেন্টেশন, ডেটাবেজ সার্ভারের সঙ্গে সংযোগ স্থাপন ইত্যাদি করতে হবে। একে বলে ওয়েবসাইটের ব্যাক-এন্ড ডেভেলপমেন্ট (Back-end development)। যেসব ডেভেলপার ফ্রন্ট-এন্ড ও ব্যাক-এন্ড উভয়ের কাজই জানেন তাদেরকে সাধারণত ফুলস্ট্যাক ডেভেলপার ( Full-stack developer) বলা হয়।

ডেভেলপমেন্ট চলাকালীন প্রয়োজনবোধে ডিজাইনে বিভিন্ন পরিবর্তন করার দরকার হতে পারে। এ বিষয়গুলো মাথায় রেখে কোড লিখতে হবে। ডেভেলপমেন্টের পাশাপাশি আবার নিয়মিত টেস্টিং ও ডিবাগিং করতে হবে। অর্থাৎ, ওয়েবসাইটের সব ফিচার ঠিকমতো কাজ করছে কি না, তা যাচাই করতে হবে, এবং সমস্যা ধরা পড়লে সেগুলো সমাধান করতে হবে।

একটি ওয়েবসাইট যেন সবাই ব্রাউজ করতে পারে, সেজন্য ওয়েবসাইটটি পাবলিশ করতে হয়। আসলে ওয়েবসাইট এমন একটি কম্পিউটারে রাখতে হয়, যেন সেই কম্পিউটারটি সর্বক্ষণ সচল থাকে এবং ইন্টারনেটের সঙ্গে যুক্ত থাকে। সেই সঙ্গে আরেকটি জিনিস থাকতে হয়, যাকে বলে পাবলিক আইপি অ্যাড্রেস (IP Address)। এটি হচ্ছে ইন্টারনেটে ওই কম্পিউটারের একটি নির্দিষ্ট ঠিকানা। ব্যক্তিগত কাজে যেসব কম্পিউটার ব্যবহার করা হয়, সেখানে অবশ্য ইন্টারনেট সংযোগ থাকলেও নির্দিষ্ট পাবলিক আইপি অ্যাড্রেস থাকে না। ইন্টারনেট সংযোগদাতা প্রতিষ্ঠানের সঙ্গে যোগাযোগ করে পাবলিক আইপি অ্যাড্রেস সংগ্রহ করা যায়। তবে কেউই তার ব্যক্তিগত কম্পিউটার ২৪ ঘণ্টা চালু রাখবে না, তাই বিভিন্ন প্রতিষ্ঠান ওয়েব হোস্টিং সেবা প্রদান করে, যেখানে ওয়েবসাইট রাখা ও পাবলিশ করা যায়। একটি ওয়েবসাইটকে পাবলিশ করার জন্য যখন কোনো ওয়েব সার্ভারে ওয়েবসাইটটিকে আপলোড করা হয় সেই পদ্ধতিকে হোস্টিং বলে।

আইপি অ্যাড্রেস ব্যবহার করে ওয়েবসাইট ব্রাউজ করা গেলেও কেউ বাস্তবে আইপি অ্যাড্রেস মনে রাখে না । তাই ওয়েবসাইটের ডোমেইন নাম (domain name) বলে একটি জিনিস থাকে। bangladesh.gov.bd, wikipedia.org ইত্যাদি হচ্ছে ডোমেইন নাম। ইন্টারনেটে ডোমেইন নাম কিনতে পাওয়া যায়। তবে যে ডোমেইন নাম এখনো কেউ কিনে ফেলেনি, সেগুলোই কেবল কেনা যাবে। তারপর ডোমেইন নামের সঙ্গে ওয়েব হোস্টিং সার্ভারের একটি সংযোগ প্রতিষ্ঠা করতে হয়। তাহলে কেউ ওয়েব ব্রাউজারের অ্যাড্রেস বারে ওই ডোমেইন নাম লিখে এন্টার কি চাপলে ওয়েবসাইটটি দেখতে পাবে।